'use strict';
import React, {Component} from "react";
import {ScrollView, View, Text, Image, StyleSheet,  ActivityIndicator,
    InteractionManager} from "react-native";
import ToolBar from "../Components/ToolBar";
import WebContainer from "../Components/WebContainer";
import BottomShareView from "../Components/BottomShareView";
import Global from "../Commom/GlobalConst";
import RuralLibraryAPIService from "../Commom/RuralLibraryAPIService";
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    avatarBox: {
        height: 80,
        padding: 10,
        borderBottomColor: '#F2F3F5',
        borderBottomWidth: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
    },
    avatarImg: {
        width: 50,
        height: 50,
        borderRadius: 25
    },
    avatarName: {
        width: 60,
        fontSize: 16,
        textAlign: 'center',
    }
});

class VillageHeadSayPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            village: {},
        };
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            RuralLibraryAPIService.villageChiefDetails(this.props.id).then((ret)=> {
                this.setState({
                    isLoading: false,
                    village: ret,
                })
            }).catch((err)=> {

            });
        });
    }

    render() {
        var wanjian='会同村位于唐家湾镇金鼎西南部，北、东、南向为凤凰山体环绕，西侧有荷花塘一座，整个村落取“背山面水”之势，环境优美同村选址隐幽、规划格局严整、整体风貌中西合璧、建筑质量上乘，不仅是以莫氏家族为代表的买办文化的物化缩影，也是大陆文化与海洋文化结合兼容在村镇建设中的典例';
        var html = '<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"></head><body><div style="padding: 8px;">' + wanjian + '</div></body></html>';
        return (
            <View style={styles.container}>
                {
                    this.state.isLoading ? <View style={{flex:1,backgroundColor:'#F5F5F5'}}><View
                        style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                        <View
                            style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                            <ActivityIndicator
                                animating={this.state.animating}
                                style={{ alignItems: 'center',justifyContent: 'center'}}
                                size="large"/>
                            <Text style={{color:'white'}}>加载中...</Text>
                        </View>
                    </View>
                    </View> :
                        <View style={styles.container}>
                            <ToolBar leftFunc={()=>this.props.navigator.pop()}
                                     title={'村长说'}
                                     rightFunc={()=> {
                                         this.shareView.showShareView();
                                     }}
                            />
                            <ScrollView style={styles.container}>
                                <View style={styles.avatarBox}>
                                    <Image
                                        style={styles.avatarImg}
                                        source={{uri:this.state.village.avatar}}
                                    />
                                    <Text numberOfLines={1} style={styles.avatarName}>{this.state.village.name}</Text>
                                </View>
                                <WebContainer html={html}/>
                            </ScrollView>
                        </View>
                }
                <BottomShareView
                    shareTitle={this.state.village.name}
                    shareContent={this.state.village.introduce}
                    shareImageUrl={this.state.village.avatar}
                    shareUrl={'http://xc.xiarikui.cn/Api/Index/share'}
                    ref={(ref) => {this.shareView = ref;}}/>
            </View>
        )
    }

}

export default VillageHeadSayPage;